<template>
    <div class="the-header">
        <div class="header-logo" @click="goHome">
<!--            <div class="icon">-->
<!--                <img src="../assets/img/erji.svg"/>-->
<!--            </div>-->
            <svg class="icon">
                <use xlink:href="#icon-erji"></use>
            </svg>
            <span>Music</span>
        </div>
        <ul class="navbar">
            <li :class="{active: item.name === activeName}" v-for="item in navMsg" :key="item.path" @click="goPage(item.path, item.name)">
                {{item.name}}
            </li>
            <li>
                <div class="header-search">
                    <input type="text" placeholder="搜索音乐" @keyup.enter="goSearch" v-model="keywords"/>
                    <div class="search-btn" @click="goSearch">
                        <svg class="icon">
                            <use xlink:href="#icon-sousuo"></use>
                        </svg>
                    </div>
                </div>
            </li>
            <li v-show="!loginIn" :class="{active: item.name === activeName}" v-for="item in loginMsg" :key="item.path" @click="goPage(item.path, item.name)">
                {{item.name}}
            </li>
        </ul>
        <div class="header-right" v-show="loginIn">
            <div id="user">
                <img :src="attachImageUrl(avator)"/>
            </div>
            <ul class="menu">
                <li v-for="(item, index) in menuList" :key="index" @click="goMenuList(item.path)">
                    {{item.name}}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {navMsg, loginMsg, menuList} from "@/assets/data/header";
import {mapGetters} from 'vuex';
import {mixin} from "@/mixins";

export default {
        name: "TheHeader",
        mixins: [mixin],
        data(){
            return{
                navMsg: [],      //左侧导航栏
                keywords: '',    //搜索关键字
                loginMsg: [],    //右侧导航栏
                menuList: [],    //用户下拉菜单
            }
        },
        //计算
        computed: {
            ...mapGetters([
               'activeName',
                'loginIn',
                'avator'    //用户头像
            ])
        },
        created(){
            //
            this.navMsg = navMsg;
            this.loginMsg = loginMsg;
            this.menuList = menuList;
        },
        //页面加载完成后添加头像的点击事件，弹出菜单
        mounted(){
            document.querySelector('#user').addEventListener('click', function (e) {
                document.querySelector('.menu').classList.add('show');
                e.stopPropagation();    //关键在于阻止冒泡
            },false);
            document.querySelector('.menu').addEventListener('click', function (e) {
                e.stopPropagation();    //点击菜单内部时，阻止事件冒泡，这样，点击内部时，菜单不会关闭
            },false);
            //点击外部， 关闭菜单
            document.addEventListener('click', function () {
                document.querySelector('.menu').classList.remove('show');
            },false);
        },
        methods:{
            //回到首页
            goHome(){
                this.$store.commit('setActiveName', '首页');
                this.$router.push({path: "/"});
            },
            //转向其他vue页面
            goPage(path, name){
                if(!this.loginIn && path == '/my-music'){
                    this.$notify({title: '请先登录', type: 'warning'});
                }else{
                    this.$store.commit('setActiveName', name);
                    this.$router.push({path: path});
                }
            },
            //搜索
            goSearch(){
                this.$router.push({path: '/search', query: {keywords: this.keywords}})
            },
            //用户选项跳转
            goMenuList(path){
                if(path == 0){
                    this.$store.commit('setIsSongActive', false);
                    this.$store.commit('setLoginIn', false);
                    this.$router.push({path: '/'});
                    this.$store.commit('setActiveName', '首页');
                    //相当于刷新页面
                    this.$router.go(0);
                }else{
                    this.$router.push({path: path});
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
@import "../assets/css/the-header.scss";
</style>